<div x-data="{annual: true}" class="px-3 py-12">
  <h2 class="text-3xl font-semibold leading-7 text-indigo-600 text-center">Billing</h2>
  <p class="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
    <b>Recurrent Azimutt user?</b>
    Choose the plan that suit you more.<br>
    More details on <a href={Routes.website_path(@conn, :pricing)} target="_blank" rel="noopener noreferrer" class="underline">pricing page</a>.
    Don't hesitate to <a href={"mailto:#{Azimutt.config(:contact_email)}"} class="underline">reach out</a> for any question.
  </p>
  <div class="mt-16 flex justify-center">
    <fieldset aria-label="Payment frequency">
      <div class="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs font-semibold leading-5 ring-1 ring-inset ring-gray-200">
        <label @click="annual = false" :class="{'bg-indigo-600 text-white': !annual, 'text-gray-500': annual}" class="cursor-pointer rounded-full px-2.5 py-1">
          <input type="radio" name="frequency" value="monthly" class="sr-only">
          <span>Monthly</span>
        </label>
        <label @click="annual = true" :class="{'bg-indigo-600 text-white': annual, 'text-gray-500': !annual}" class="cursor-pointer rounded-full px-2.5 py-1">
          <input type="radio" name="frequency" value="annually" class="sr-only">
          <span>Annually</span>
        </label>
      </div>
    </fieldset>
  </div>
  <div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-3 md:max-w-2xl md:grid-cols-2 lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-3">
    <%= render AzimuttWeb.PartialsView, "_pricing_plan_light.html", plan: Azimutt.plans.solo, cta: if(@organization.free_trial_used, do: "Subscribe", else: "Start free trial"), sub: fn plan, freq -> Routes.organization_billing_path(@conn, :new, @organization.id, plan: plan, freq: freq) end %>
    <%= render AzimuttWeb.PartialsView, "_pricing_plan_light.html", plan: Azimutt.plans.team, cta: if(@organization.free_trial_used, do: "Subscribe", else: "Start free trial"), sub: fn plan, freq -> Routes.organization_billing_path(@conn, :new, @organization.id, plan: plan, freq: freq) end %>
    <%= render AzimuttWeb.PartialsView, "_pricing_plan_light.html", plan: Azimutt.plans.enterprise, cta: "Contact us", sub: fn _, _ -> "mailto:#{Azimutt.config(:support_email)}" end %>
  </div>
</div>
